<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="../common/base.jsp"%>
<%response.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login</title>
<link href="${path }/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="${path }/dist/css/Buttom.css" rel="stylesheet" />
<link href="${path }/dist/css/flat-ui.css" rel="stylesheet">
<link
	href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"
	rel="stylesheet">
<style type="text/css">
table a, table span {
	margin-right: 5px;
}
</style>
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading" style="background: none;">
			<span class="fui-user"></span> <span>管理角色</span>
			<button type="button"
				class="buttons button-caution button-rounded button-tiny"
				style="float: right; margin-right: 60px;"
				onclick="javascript :history.back(-1)">取消</button>
			<button type="button"
				class="buttons button-royal button-rounded button-tiny"
				style="float: right; margin-right: 5px;"  id="btnAdd">新建角色</button>
			<div class="panel-body" style="padding: 0px;">
				<div class="table-responsive">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>序号</th>
								<th>角色名称</th>
								<th>角色用户数</th>
								<th>编辑</th>
							</tr>
						</thead>
						<tbody>

							<c:forEach var="wal" items="${rolelist}" varStatus="status">
								<tr id="row_${status.count }">
									<td id="id_${status.count }">${status.count }</td>
									<td id="RoleName_${status.count }"
										<c:if test='${wal.name=="超级管理员"}'>style="color: #f00"</c:if>>${wal.name }</td>
									<td id="RoleNum_${status.count }">总用户数：<span>001</span>禁止登录数：<span>000</span>辅助角色数：<span>000</span></td>
									<td id="Operating_${status.count }"><a
										href="#" onclick="modify('${status.count }','${wal.id }')">编辑</a><a
										href="${path }/examples/editRolepurview.jsp?roleid=${wal.id }">权限</a><a href="#">克隆</a>
									<c:if test='${wal.name!="超级管理员"}'>
											<a href="${path}/role/delrole?roleid=${wal.id }">删除</a>
										</c:if></td>
								</tr>
							</c:forEach>
							
							<tr id="firstRow" style="display: none">
								<td>#</td>
								<td><input type="text" class="form-control input-sm" placeholder="name：" name="rolename"/></td>
								<td style="color: #00f;">请输入角色名称</td>
								<td><a href="#" id="conif">完成</a><a href="#" id="aAdd">取消</a></td>
								
							</tr>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<script src='${path }/dist/js/jquery.min.js'></script>
	<script src='${path }/dist/js/bootstrap.min.js'></script>
	<script type="text/javascript">
	<!--
	var whichTr,idtd,nametd,numtd,opertd;
	var idtdhtml,nametdhtml,numtdhtml,opertdhtml;
	function modify(id,id2){
		$("#firstRow").hide();
		whichTr=$('#row_'+id);//TR
		idtd=whichTr.children("#id_"+id);
		nametd=whichTr.children("#RoleName_"+id);
		numtd=whichTr.children("#RoleNum_"+id);
		opertd=whichTr.children("#Operating_"+id);
		//alert(nametd.html().indexOf('value=')==-1);
		idtdhtml=idtd.html();
		nametdhtml=nametd.html();
		numtdhtml=numtd.html();
		opertdhtml=opertd.html();
		
		
	
		idtd.html("#");
		nametd.html("<input type='text' name='rolenametd' value='"+nametd.html()+"' size=12 class='form-control input-sm'/>"
		+"<input type='hidden' name='editid1' value='"+id2+"'/>");
		numtd.html("<span style='color: #00f;'>请输入要修改的名称</span>");
		opertd.html( "<a href='#' onclick='sure()'>完成</a><a href='#' onclick='rollea()'>取消</a>");
	}
	function addRole(){
			{
	  			var whichEl = $("#firstRow");
	    		if(whichEl.css("display") == "none"){
					whichEl.show();
					$("#btnAdd").html("取消新建");
				} else {
					whichEl.hide();
					$("#btnAdd").html("新建角色");
				}
	  		}
		}
	function sure(){
		var name=$("input[name='rolenametd']").val();
		var id=$("input[name='editid1']").val();
			if(name!=null||id!=null)
				window.location.href="${path}/role/eidtrolename?rolename="+ encodeURI(encodeURI(name))+"&roleid="+id;
			else alert("角色名不能为空");
	}
	function rollea(){
		idtd.html(idtdhtml);
		nametd.html(nametdhtml);
		numtd.html(numtdhtml);
		opertd.html(opertdhtml);
	}
	$(document).ready(function(){
  		$("#btnAdd").bind("click",addRole);
  		$("#aAdd").bind("click",addRole);
  		$("#conif").bind("click",function(){
  			var name=$("input[name='rolename']").val();
  			
  			if(name!=null)
  				window.location.href="${path}/role/addrole?rolename="+ encodeURI(encodeURI(name));
  			else alert("角色名不能为空");
  		});
  		
  		
	});
	//-->
	</script>
	<c:if test="${iseditpurview=='true' }">
		<script type="text/javascript">
		<!--
		$(function() {
			if (!window.confirm("角色已增加，是否现在就编辑角色权限--超级管理权限")) {
				return;
			}
			window.location.href="${path }/examples/editRolepurview.jsp?roleid=${roleid}"
			
		});
		//-->
		</script>
	</c:if>
</body>
</html>